{% extends base %}

{% block head %}
<style type="text/css">
    .content-left {
        float: left;
        width: 700px;
    }

    .content-right {
        padding-left: 10px;
        float: left;
        width: 300px;
    }

    /** 移动端样式放在最后 **/
    @media screen and (max-width: 1000px) {
        /** mobile **/
        .content-left {
            width: 100%;
        }

        .content-right {
            padding-left: 0px;
            width: 100%;
        }
    }
</style>
{% end %}

{% block body %}
    <div class="card">
        <div class="grid-title">
            <span>{{title}}</span>
            <div class="float-right">
                <a class="btn" href="javascript:createGroup();">新建笔记本</a>
                <a class="btn btn-default" href="/note/tools">工具</a>
            </div>
        </div>

        {% include note/script/create_script.html %}
    </div>

    <div class="content-left">
    {% for title0, groups in group_cards %}
        <div class="card">
            
            <div class="card-title">
                <span>{{title0}}</span>
                <div class="float-right">
                </div>
            </div>
            {% if len(groups) == 0 %}
                {% include common/text/empty_text.html %}
            {% end %}

            {% for item in groups %}
                <a class="list-link" href="{{item.url}}">
                    
                    {% if item.priority>0 %}
                        <i class="fa fa-thumb-tack black"></i>
                    {% end %}

                    <!-- 图标和标题 -->
                    <i class="fa {{item.icon}} fa-{{item.icon}} black"></i>                
                    <span>{{item.name}}</span>
                    <div class="float-right">
                        <span class="book-size-span">{{item.size}}</span>
                        <i class="fa fa-chevron-right"></i>
                    </div>
                </a>
            {% end %}
        </div>
    {% end %}
    </div>

    <div class="content-right">
        {% include note/card/note_types.html %}
        {% include note/card/recent_update_notes.html %}
    </div>
{% end %}